<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
	  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
		<title>添加地址</title>
		<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
		<link rel="stylesheet" href="../style/index.css"/>
		<link rel="stylesheet" type="text/css" href="../style/addressPicker/addressPicker.css" />
	</head>
	<style>
			body {
			  background-color:#F8F8F8;
			}

			/*/////////////////////////////////*/
			.bott{
					display: flex;
					justify-content: center;
					padding: 0.36rem 0.4rem;
					margin-top: 0.2rem;
					font-size: 0.3rem;
				}
				.bott-btn{
					font-size: 0.3rem;
					color: #A48347;
					width: 4rem;
					height: 0.80rem;
					border-radius: 0.40rem;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(to right, #C4A162 ,#F6E0A6);
				}
				.top{
					margin-top: 0.20rem;
					background-color: #FFFFFF;
				}
				.row{
					display: flex;
					align-items: center;
					padding: 0.36rem 0.28rem;

				}.row-xb{
					display: flex;
					align-items: center;
					padding: 0.36rem 0.28rem;
					justify-content: flex-end;
				}
				.row-title{
					font-size: 0.32rem;
					margin-top: 0.06rem;
					color: #333333;
					display: flex;
					align-items: center;

				}
				.row-inp{
					flex-grow:1;
					display: flex;
					align-items: center;
				}
				.inp{
					width: 100%;
					border: solid #F8F8F8 0px;
					padding-top: 0.04rem;
				}

				.btn1 {
					width: 100%;
					display: flex;
					justify-content: center;
					margin-top: 0.5rem;i
					background: #f5f5f5;
				}

				.addr {
					width: 6.50rem;
					height: .90rem;
					line-height: .90rem;
					font-size: .36rem;
					background: #ff502d;
					color: #fff;
					display: flex;
					justify-content: center;
					margin-bottom: .50rem;
					border-radius: .1rem;
				}
				.xb{
					margin-right: 0.5rem;
				}



	</style>
	<body>
		<div id="app">
			<div class="top">
				<div class="row" style="border-bottom: solid #F8F8F8 1px;">
					<div class="row-title">
						收货人：
					</div>
					<div class="row-inp">
						<input class="inp" v-model="siteName" type="text" value="" placeholder="请填写收货人姓名"/>
					</div>
				</div>
				<div class="row" style="border-bottom: solid #F8F8F8 1px;">
					<div class="row-title">
						手机号：
					</div>
					<div class="row-inp">
						<input class="inp" v-model="sitephone"  type="number" value="" placeholder="请填写收货人手机号"/>
					</div>
				</div>
				<div class="row" style="border-bottom: solid #F8F8F8 1px;" @click="getAddress()">
					<div class="row-title">
						收货地址：
					</div>
					<div class="row-inp">
						<input class="inp" v-model="addr" readonly="readonly" type="text" value="" placeholder="请填写收货地址"/>
					</div>
				</div>
				<div class="row" >
					<div class="row-inp">
						<input class="inp" v-model="siteInfo" type="text" value="" placeholder="补充详细地址"/>
					</div>
				</div>
				<div class="row-xb">
					<div class="xb" @click="onxb(1)">
						<span v-if="sex==1" class="icon iconfont iconduigou " style="color:#27B700;font-size:0.4rem;"></span>
						<span v-else class="icon iconfont iconduigou" style="color:#eee;font-size:0.4rem;"></span>
						先生
					</div>
					<div class="xb" @click="onxb(0)">
						<span v-if="sex==0" class="icon iconfont iconduigou " style="color:#27B700;font-size:0.4rem;"></span>
						<span v-else class="icon iconfont iconduigou" style="color:#eee;font-size:0.4rem;"></span>
						女士
					</div>
				</div>

			</div>
			<div class="btn1">
				<div class="addr" @click="postData()">
					保存
				</div>
			</div>

			<address-picker ref="addressPicker"></address-picker>
		</div>
		<script src="../plugin/jquery.js"></script>
		<!-- <script src="../plugin/vue.all.js"></script> -->
		<script src="../plugin/hhframe/hhframe.min.js"></script>
		<script src="../plugin/public.js"></script>
		<script type="text/javascript" src="../style/addressPicker/vue.min.js"></script>
		<script type="text/javascript" src="../style/addressPicker/address.js"></script>
		<script type="text/javascript" src="../style/addressPicker/addressPicker.js"></script>
		<script type="text/javascript">
		window.addEventListener("apiready",function(){
			index()
		});
			function index()
			{
			var vm = new Vue({
				el: '#app',
				data:{
					datas:[],//省市区集合
					addr: '',
					siteName:'',
					sitephone:'',
					siteInfo:'',//详细地址
					province:'',//省
					city:'',//市
					county:'',//区
					sex:1,//性别
					selectedInfo:[],//地址数据
					provinceid: '',
					cityid: '',
					areaid: '',
				},
				mounted: function(){
					  this.getAddrDetail()
						this.getAllAddr()	// 获取省市县
				},
				methods: {
					//获取地址详情
					getAddrDetail: function(id) {
						let param = {
								address_id: api.pageParam.id
						}
						AjaxSafe({
								url:"/xapp/user/addressInfo",
								data:param,
								loader:true,
							success: function(ret) {
								let addr = ret.data.address.split('-')
								if (ret.state) {
										vm.siteName=ret.data.consignee
										vm.sitephone= ret.data.phone
										vm.province= addr[0]
										vm.city= addr[1]
										vm.county= addr[2]
										vm.siteInfo= addr[3]
										vm.provinceid= ret.data.county_id
										vm.cityid= ret.data.province_id
										vm.areaid= ret.data.city_id
										vm.sex= ret.data.sex
										vm.is_default= ret.data.is_default
										vm.addr = addr[0] +' - '+ addr[1] +' - '+ addr[2]
								}
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					},

					// 获取省市县
					getAllAddr(){
							AjaxSafe({
					   		url:"/xapp/index/findAllAddr",
					    	loader:false,
							success: function(ret) {
								let items = (ret || []).map(item => {
									item.name = item.province
									item.sub = (item.citys || []).map(item => {
										item.name = item.city
										item.sub = (item.areas || []).map(item => {
											item.name = item.area
											return item
										})
										return item
									})
									return item
								})
							    vm.datas = items
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					},
					getAddress: function() {
						if(!this.datas.length) return
						var UIActionSelector = api.require('UIActionSelector');
						UIActionSelector.open({
						    datas: vm.datas,
						    layout: {
						        row: 5,
						        col: 3,
						        height: 30,
						        size: 12,
						        sizeActive: 14,
						        rowSpacing: 5,
						        colSpacing: 10,
						        maskBg: 'rgba(0,0,0,0.2)',
						        bg: '#fff',
						        color: '#888',
						        colorActive: '#f00',
						        colorSelected: '#f00'
						    },
						    animation: true,
						    cancel: {
						        text: '取消',
						        size: 12,
						        w: 90,
						        h: 35,
						        bg: '#fff',
						        bgActive: '#ccc',
						        color: '#888',
						        colorActive: '#fff'
						    },
						    ok: {
						        text: '确定',
						        size: 12,
						        w: 90,
						        h: 35,
						        bg: '#fff',
						        bgActive: '#ccc',
						        color: '#888',
						        colorActive: '#fff'
						    },
						    title: {
						        text: '请选择',
						        size: 12,
						        h: 44,
						        bg: '#eee',
						        color: '#888'
						    },
						    fixedOn: api.frameName
						}, function(ret, err) {
				        if(ret.eventType == 'ok'){
									vm.province = ret.level1//省
									vm.city = ret.level2//市
									vm.county = ret.level3//区
									vm.addr = ret.level1 +' - '+ ret.level2 +' - '+ ret.level3
									vm.selectedInfo = ret.selectedInfo
									vm.provinceid= ret.selectedInfo[0].provinceid
									vm.cityid= ret.selectedInfo[1].cityid
									vm.areaid= ret.selectedInfo[2].areaid
								}
					});
				},
					// 切换性别
					onxb(index){
						this.sex = index
					},
					//保存地址
					postData: function (){
						if(!this.siteName){
							api.toast({msg: "收货人姓名不能为空",duration: 2000,location: 'middle'});
							return
						}
						if(!this.sitephone){
							api.toast({msg: "收货人手机号不能为空",duration: 2000,location: 'middle'});
							return
						}
						if(!this.province){
							api.toast({msg: "收货地址不能为空",duration: 2000,location: 'middle'});
							return
						}
						if(!this.siteInfo){
							api.toast({msg: "详细地址不能为空",duration: 2000,location: 'middle'});
							return
						}
						let userInfo = localdata.get("userinfo")
						let param = {
							'address.city_id': this.cityid,
				      'address.province_id': this.provinceid,
				      'address.county_id': this.areaid,
				      'address.address': this.province+'-'+this.city+'-'+this.county+'-'+this.siteInfo,//地址
				      'address.user_id': userInfo.id,//用户id
				      'address.lat': '',
				      'address.lng': '',
				      'address.consignee': this.siteName,//姓名
				      'address.phone': this.sitephone,//电话
				      'address.sex': this.sex,//性别
				      'address.is_default': this.is_default,//设置默认地址
							'address.id': api.pageParam.id
						}
						AjaxSafe({
					   		url:"/xapp/user/saveAddress",
					    	data:param,
							success: function(res) {
							    if (res.state) {
						        	api.toast({
													msg: res.msg,
													duration: 2000,
													location: 'middle'
											});
											api.closeWin();
							    } else {
							    	api.toast({
											msg: res.msg,
											duration: 2000,
											location: 'middle'
										});
							    }
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					},


				}
			})
		}
		</script>
	</body>

</html>
